<template>
  <div id="index" v-loading="loading">
    <TaskDetail ref="taskdetail" :task="showedTask" />
    <div id="total">
      <div class="count">
        总共有 {{ total }} 条悬赏
      </div>
      <TaskItem v-for="task in pageTasks" :key="task.txhash" :task="task" @showdetail="showDetail" />
      <div class="footer">
        <el-button @click="prePage">上一页</el-button>
        <el-button @click="nextPage">下一页</el-button>
       </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import util from '../util';
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
  import TaskItem from './TaskItem'
  import TaskDetail from './TaskDetail'

  export default {
    components: {ElButton, TaskItem, TaskDetail},
    name: 'index',
    data () {
      return {
        loading: false,
        total: 0,
        limit: 5,
        offset: 0,
        tasks: [],
        pageTasks: [],
        showedTask: {}
      }
    },
    created() {
      this.taskCount();
    },
    methods: {
      showDetail(task) {
        this.showedTask = task;
        this.$refs.taskdetail.show();
      },
      taskCount() {
        this.loading = true;
        util.nebPay.simulateCall(
          util.config.dappaddr,
          '0',
          'getTaskCount',
          '',
          {
            listener: (data) => {
              if (data.execute_err && data.execute_err == 'contract check failed') {
                this.loading = false;
                this.$alert('请确认钱包插件网络为「Mainnet」，切换后刷新重试', '网络错误', {
                  confirmButtonText: '确定'});
              } else {
                this.total = parseInt(data.result);
                if (this.total > 0) {
                  this.loadTask();
                }
                else {
                  this.loading = false;
                  this.$message({
                    showClose: true,
                    message: '暂时还没有悬赏！'
                  });
                }
              }
            }
          });
      },
      prePage() {
        var offset = this.offset - this.limit;
        if (offset < 0) {
          this.$message({
            showClose: true,
            message: '悬赏全部加载完了'
          });
        }
        else {
          this.offset = offset;
          if (this.tasks.length > this.offset) {
            this.prepareTasks();
          }
          else {
            this.loadTask();
          }
        }
      },
      nextPage() {
        var offset = this.limit + this.offset;
        if (offset >= this.total) {
          this.$message({
            showClose: true,
            message: '悬赏全部加载完了'
          });
        }
        else {
          this.offset = offset;
          if (this.tasks.length > this.offset) {
            this.prepareTasks();
          }
          else {
            this.loadTask();
          }
        }
      },
      prepareTasks() {
        this.pageTasks.splice(0);
        var stop = this.limit + this.offset;
        if (stop > this.total) stop = this.total;
        for (var i = this.offset; i < stop; i++) {
          this.$set(this.pageTasks, i - this.offset, this.tasks[i]);
        }
      },
      loadTask() {
        this.loading = true;
        var args = '["' + this.limit + '", "' + this.offset + '", "1"]';
        util.nebPay.simulateCall(
          util.config.dappaddr,
          '0',
          'getTasks',
          args,
          {
            listener: (data) => {
              this.loading = false;
              if (data.execute_err && data.execute_err == 'contract check failed') {
                this.$alert('请确认钱包插件网络为「Mainnet」，切换后刷新重试', '网络错误', {
                  confirmButtonText: '确定'});
              } else {
                var result = JSON.parse(data.result);
                for (var index in result) {
                  this.tasks.push(result[index]);
                }
                this.prepareTasks();
              }
            }
          });
      },
      listenWallet() {
        window.addEventListener('message', (resp) => {
          if(resp.data.src !== "content")
            return;
          if(typeof resp.data.resp !== 'object')
            return;
          var key = resp.data.serialNumber;
          console.log(resp.data.resp);
          var txhash = resp.data.resp.txhash;
          console.log('->key: ' + key);
          console.log('->txthash: ' + txhash);
          this.txhash = txhash;
          this.success = true;
        });
      }
    }
  };
</script>

<style>
  .task {
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
  }
  .title {
    font-size: 20px;
    color: #1a1a1a;
    text-decoration: underline;
  }
  .content {
    font-size: 15px;
    color: #1a1a1a;
  }
  .footer {
    display: flex;
    justify-content: flex-end;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 98%;
    margin: auto;
    margin-top: 0px;
  }

  .count {
    padding: 10px 0px 0px 20px;
  }

  .container {
    background-color: #fff;
    padding: 30px 15px 30px 15px;
    min-height: 400px;
  }
  .take {
    padding-top: 20px;
  }

  .result {
    margin-top: 20px;
    padding: 20px;
  }

</style>
